iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
自我挑戰組

30天CSS、JS、React打造專案零組件系列 第 7

DAY07 - [CSS+RWD] 導覽列

  • 分享至 

  • xImage
  •  

今日文章目錄
> - 導覽列
> - 練習演示
> - 遇到的問題
> - 參考資料


導覽列

今天終於要來面對導覽列的部分了!結果偏偏只剩三個小時可以寫這篇文章
不管了~寫到哪,算到哪,反正總有一天會寫完的
就直接用第13屆IT鐵人賽的導覽列做練習吧!


練習演示

手機版
電腦版


遇到的問題

  • 手機版:歷年回顧的第二層選單無法關閉。
    • 推測原因:我使用 :hover去觸發第二層選單開啟,但是手機版開啟、關閉都是點擊選單,所以沒有關閉的設定,一時之間也想不到CSS關閉寫法。

參考資料


明日預告:圖文交錯排版


上一篇
DAY06 - [CSS] 用 linear-gradient 做出 三邊、四邊型效果
下一篇
DAY08 - [CSS+RWD] 圖文交錯排版,資料不打結!
系列文
30天CSS、JS、React打造專案零組件30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言